<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--搜索-->
      <el-col :span="4" :xs="24" style="color: #ffffff;">
        <div class="container">
          <div style="margin-bottom: 10px">
            总计{{ getAll.total }}/正常{{ getAll.normal }}/告警{{
              getAll.warn
            }}/离线{{ getAll.offline }}
          </div>
          <div class="head-container">
            <el-input
              v-model="queryParams.deviceName"
              placeholder="请输入设备名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 10px"
            />
          </div>
          <div
            style="
              margin-top: 10px;
              overflow-y: scroll;
              width: 100%;
              height: 710px;
              line-height: 25px;
            "
          >
            <div
              style="background: #00484d; cursor: pointer; margin-bottom: 5px;padding-left: 5px;"
              v-for="(item, i) in seacher"
              :key="i"
              @click="seacherId(item.deviceId)"
            >
              {{ item.deviceName }}
            </div>
          </div>
        </div>
      </el-col>
      <!--tab卡-->
      <el-col :span="20" :xs="24">
        <div class="container2">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!--            卡片展示-->
            <el-tab-pane label="卡片展示" name="first">
              <div style="display: flex;">
                <div
                  v-for="(arr, i) in tableseachs"
                  :key="i"
                  style="
                    margin-left: 20px;
                    margin-bottom: 20px;
                    width: 300px;
                    line-height: 30px;
                    background: #0c323a;
                    color: #ffffff;
                    border-radius: 10px;
                    padding: 10px;
                  "
                >
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                    "
                  >
                    <div>{{ arr.deviceName }}({{ arr.deviceId }})</div>
                    <div style="display: flex; align-items: end">
                      <img
                        style="width: 20px; height: 15px"
                        :src="
                          arr.signal == 0
                            ? require('@/assets/image/signal0.png')
                            : arr.signal <= 20
                            ? require('@/assets/image/signal1.png')
                            : arr.signal <= 40
                            ? require('@/assets/image/signal2.png')
                            : arr.signal <= 60
                            ? require('@/assets/image/signal3.png')
                            : arr.signal <= 80
                            ? require('@/assets/image/signal4.png')
                            : require('@/assets/image/signal5.png')
                        "
                        alt=""
                      />
                      <img
                        style="width: 30px; height: 15px; margin-left: 10px"
                        :src="
                          arr.electricity == 0
                            ? require('@/assets/image/el1.png')
                            : arr.electricity <= 25
                            ? require('@/assets/image/el2.png')
                            : arr.electricity <= 50
                            ? require('@/assets/image/el3.png')
                            : arr.electricity <= 75
                            ? require('@/assets/image/el4.png')
                            : require('@/assets/image/el5.png')
                        "
                        alt=""
                      />
                    </div>
                  </div>
                  <div v-for="(item, index) in arr.data" :key="index">
                    <div>{{ item.channelName }} {{ item.value }}</div>
                  </div>
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      padding-top: 10px;
                    "
                  >
                    <el-button
                      size="mini"
                      style="background: #006675; color: white; border: none"
                      @click="historys(arr)"
                      >历史数据</el-button
                    >
                    <div>{{ arr.time }}</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <!--            表格展示-->
            <el-tab-pane label="表格展示" name="second">
              <!--          搜索-->
              <Search
                :search-data="searchData"
                :search-params="queryParams"
                @change="searchParamsUpdate"
              >
              </Search>
              <right-toolbar
                :showSearch.sync="showSearch"
                :columns="columns"
              ></right-toolbar>
              <!--              表格-->
              <el-table
                ref="refTable"
                :data="tableData"
                style="width: 100%; background: #002127"
                height="580px"
                :cell-style="{ backgroundColor: '#002127', color: '#ffffff' }"
                :header-cell-style="{
                  backgroundColor: '#00484D',
                  textAlign: 'center',
                  fontWeight: 'bold',
                  color: '#ffffff',
                  borderBottom: '1px solid #00484D',
                }"
              >
                <el-table-column
                  prop="deviceName"
                  label="设备名称"
                  sortable
                  v-if="columns[0].visible"
                  align="center"
                />
                <el-table-column
                  prop="deviceId"
                  label="设备id"
                  sortable
                  v-if="columns[1].visible"
                  align="center"
                />
                <el-table-column
                  prop="devType"
                  label="设备状态"
                  sortable
                  v-if="columns[2].visible"
                  align="center"
                />
                <!--                <el-table-column prop="devError" label="设备状态" v-if="columns[3].visible" align="center" />-->
                <el-table-column
                  label="通道名称"
                  v-if="columns[3].visible"
                  align="center"
                >
                  <template slot-scope="scope">
                    <!-- 嵌套表格将在此处插入 -->
                    <template v-for="(item, index) in scope.row.data">
                      <div
                        class="childItem"
                        :key="index"
                        v-if="index + 1 == scope.row.data.length"
                        style="display: block"
                      >
                        {{ item.channelName ? item.channelName : "-" }}
                      </div>
                      <div
                        class="childItem"
                        :key="index"
                        v-else
                        style="
                          display: block;
                          border-bottom: 1px solid rgba(0, 231, 231, 0.302);
                        "
                      >
                        {{ item.channelName ? item.channelName : "-" }}
                      </div>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  label="通道值"
                  v-if="columns[4].visible"
                  align="center"
                >
                  <template slot-scope="scope">
                    <!-- 嵌套表格将在此处插入 -->
                    <template v-for="(item, index) in scope.row.data">
                      <div
                        class="childItem"
                        :key="index"
                        v-if="index + 1 == scope.row.data.length"
                        style="display: block"
                      >
                        {{ item.value }}
                      </div>
                      <div
                        class="childItem"
                        :key="index"
                        v-else
                        style="
                          display: block;
                          border-bottom: 1px solid rgba(0, 231, 231, 0.302);
                        "
                      >
                        {{ item.value }}
                      </div>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  label="通道状态"
                  v-if="columns[5].visible"
                  align="center"
                >
                  <template slot-scope="scope">
                    <template v-for="(item, index) in scope.row.data">
                      <div
                        class="childItem"
                        :key="index"
                        v-if="index + 1 == scope.row.data.length"
                        style="display: block"
                      >
                        {{ item.channelStatus == 0 ? "关闭" : "开启" }}
                      </div>
                      <div
                        class="childItem"
                        :key="index"
                        v-else
                        style="
                          display: block;
                          border-bottom: 1px solid rgba(0, 231, 231, 0.302);
                        "
                      >
                        {{ item.channelStatus == 0 ? "关闭" : "开启" }}
                      </div>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  label="实时数据状态"
                  v-if="columns[6].visible"
                  align="center"
                >
                  <template slot-scope="scope">
                    <template v-for="(item, index) in scope.row.data">
                      <div
                        class="childItem"
                        :key="index"
                        v-if="index + 1 == scope.row.data.length"
                        style="display: block"
                      >
                        {{
                          item.status == 0
                            ? "正常"
                            : item.status == 1
                            ? "告警上限"
                            : item.status == 2
                            ? "告警下限"
                            : item.status == 3
                            ? "开关告警"
                            : item.status == 4
                            ? "预警上限"
                            : item.status == 5
                            ? "预警下限"
                            : item.status == 6
                            ? "下波动告警"
                            : "上波动告警"
                        }}
                      </div>
                      <div
                        class="childItem"
                        :key="index"
                        v-else
                        style="
                          display: block;
                          border-bottom: 1px solid rgba(0, 231, 231, 0.302);
                        "
                      >
                        {{
                          item.status == 0
                            ? "正常"
                            : item.status == 1
                            ? "告警上限"
                            : item.status == 2
                            ? "告警下限"
                            : item.status == 3
                            ? "开关告警"
                            : item.status == 4
                            ? "预警上限"
                            : item.status == 5
                            ? "预警下限"
                            : item.status == 6
                            ? "下波动告警"
                            : "上波动告警"
                        }}
                      </div>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="electricity"
                  label="电量"
                  v-if="columns[7].visible"
                  align="center"
                />
                <el-table-column
                  prop="devVolt"
                  label="电池告警"
                  v-if="columns[8].visible"
                  align="center"
                />
                <el-table-column
                  prop="devSign"
                  label="信号告警"
                  v-if="columns[9].visible"
                  align="center"
                />
                <el-table-column
                  prop="signal"
                  label="信号"
                  v-if="columns[10].visible"
                  align="center"
                />
                <el-table-column
                  prop="time"
                  label="时间"
                  v-if="columns[11].visible"
                  align="center"
                />
              </el-table>
              <!--    分页-->
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.page"
                :limit.sync="queryParams.limit"
                @pagination="getList"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
<script>
import {
  getAllDevice,
  getActualRecord,
  getCountTypeRecord,
} from "@/api/dev/index";
import Search from "@/components/PageSearch";
import pagination from "@/components/Pagination";
import RightToolbar from "@/components/RightToolbar";
export default {
  name: "DevNowManage",
  components: { Search, pagination, RightToolbar },
  data() {
    return {
      seacher: [],
      tableseachs: [],
      deviceOption: [],
      // 绑定值，选中选项卡的 name
      activeName: "first",
      activeNames: "first",
      // 搜索
      searchData: [
        {
          type: "select",
          label: "设备id",
          prop: "deviceId",
          options: [],
          placeholder: "请选择设备筛选",
        },
        {
          type: "input",
          label: "设备名称",
          prop: "deviceName",
          placeholder: "请输入设备名称筛选",
        },
      ],
      // 总条数
      total: 20,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        deviceName: "",
        deviceId: "",
      },
      // 显示搜索条件
      showSearch: true,
      // 列信息
      columns: [
        { key: 0, label: `设备名称`, visible: true },
        { key: 1, label: `设备ID`, visible: true },
        { key: 2, label: `设备状态`, visible: true },
        { key: 3, label: `通道名称`, visible: true },
        { key: 4, label: `通道值`, visible: true },
        { key: 5, label: `通道状态`, visible: true },
        { key: 6, label: `实时数据状态`, visible: true },
        { key: 7, label: `电量`, visible: true },
        { key: 8, label: `电池告警`, visible: true },
        { key: 9, label: `信号告警`, visible: true },
        { key: 10, label: `信号`, visible: true },
        { key: 11, label: `时间`, visible: true },
      ],
      // 表格
      tableData: [],
      // 状态统计
      getAll: {},
    };
  },
  props: {},
  watch: {
    deviceOption: {
      handler(val) {
        this.searchData[0].options = this.deviceOption;
      },
      immediate: true,
    },
  },
  created() {
    this.getDeviceOption();
    this.getList();
    this.getAllState();
  },
  mounted() {},
  methods: {
    // tab选项卡
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //设备下拉
    getDeviceOption() {
      const data = {
        limit: 500,
        page: 1,
      };
      getAllDevice(data)
        .then((res) => {
          const data = res.data;
          this.seacher = res.data;
          this.deviceOption = data.map((item) => {
            return {
              value: item.deviceId,
              label: item.deviceName,
            };
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击左边列表某一条数据
    seacherId(id) {
      console.log(id);
      this.queryParams.deviceId = id;
    },
    // 分页查询
    getList() {
      getActualRecord(this.queryParams)
        .then((res) => {
          console.log(res);
          this.tableseachs = res.data;
          this.total = res.dataCounts;
          this.tableData = res.data || [];
        })
        .catch((err) => {
          console.log(err);
          this.$message.error(err.errorMsg);
        });
    },
    // 点击历史记录
    historys(item) {
      console.log(item);
      this.$router.push({
        path: "./history",
        query: {
          Data: item.deviceId,
          Datas: item.deviceName,
        },
      });
    },
    //状态统计
    getAllState() {
      getCountTypeRecord()
        .then((res) => {
          console.log(res);
          this.getAll = res.data;
        })
        .catch((err) => {
          console.log(err);
          this.$message.error(err.errorMsg);
        });
    },
    // 新的搜索内容
    searchParamsUpdate() {
      this.getList();
    },
  },
};
</script>
  
<style lang='less' scoped>
.app-container {
  width: 100%;
  min-height: 100%;
  // padding: 15px;
  box-sizing: border-box;
  background: #0c323a;
  .container {
    //width: 100%;
    background: #002127;
    padding: 10px;
    border-radius: 10px;
  }
  .container2{
    background: #002127;
    // padding: 10px;
    border-radius: 10px;
  }
  // 显隐列
  //.el-col-1 {
  //  float: right;
  //}
  // 面板左对齐
  ::v-deep .el-tabs__nav-scroll {
    justify-content: flex-start;
  }
  // 面板内容距离标题
  ::v-deep .el-tab-pane {
    margin-top: 15px;
  }
  //面板标题字颜色
  ::v-deep .el-tabs__item {
    color: #999999;
  }
  //鼠标经过面板标题字颜色，选中后字颜色
  ::v-deep .el-tabs__item:hover,
  ::v-deep .el-tabs__item.is-active {
    color: #ffffff;
  }
  // 线条颜色
  ::v-deep .el-tabs__nav-wrap::after {
    background-color: #002127;
  }
  // 点击tab时线条颜色
  ::v-deep .el-tabs__active-bar {
    background-color: #00e7e7;
  }
  // 搜索框
  ::v-deep .el-input__inner {
    background: #041c21;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 231, 231, 0.502);
    color: white;
  }
  //  表格
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  //.query-form {
  //  display: flex;
  //  .query-title {
  //    margin: 0 95px 0;
  //  }
  //}
}
// 表格设置鼠标经过时背景颜色
::v-deep.el-table tbody tr:hover > td {
  background-color: #02565c !important;
}
//表格改变每行底边框颜色
::v-deep.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid rgba(0, 231, 231, 0.302) !important;
}
/*table边框颜色*/
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #002127;
}
.el-table .el-table__cell {
  padding: 0 !important;
  height: 45px;

  .cell {
    padding-left: 0;
    padding-right: 0;
    text-align: center;

    .childItem {
      height: 35px;
      line-height: 35px;
      text-align: center;
    }
  }
}
::v-deep .el-tabs__nav-scroll{  
  padding-left: 20px;
}
</style>
  